<template>
  <el-dialog
    :visible.sync="visible"
    custom-class="loginLayer">
    <template v-if="step === 0 || step === 1">
      <div class="login-box login-box1">
        <h2 class="login-header">注册</h2>
        <div class="login-from">
          <template v-if="step === 0">
            <div class="login-group login-phone"
                 :class="classObject('register_phone')">
              <i></i>
              <input v-validate="'required|mobile'" v-model="register.phone" name="register_phone" type="text"
                     data-vv-as="手机号码" placeholder="请输入手机号">
              <span v-show="errors.has('register_phone')">{{ errors.first('register_phone') }}</span>
            </div>
            <button class="login-btn" @click="nextStep" :disabled="register.loading"
                    :class="{loading: register.loading}">
              下一步 <i></i></button>
            <p class="login-tip">已有账号，去<span @click="step = 2">登录</span></p>
          </template>
          <template v-else>
            <div class="login-group login-phone" style="border-bottom: none">
              <i></i>
              <p style="padding-left: 42px;">{{register.phone}}</p>
            </div>
            <div class="login-group login-name" :class="classObject('register_name')">
              <i></i>
              <input v-validate="'required'" data-vv-as="昵称" name="register_name" type="text" placeholder="请输入昵称"
                     v-model.trim="register.name">
              <span v-show="errors.has('register_name')">{{ errors.first('register_name') }}</span>
            </div>
            <div class="login-group login-pwd" :class="classObject('register_pwd')">
              <i></i>
              <input v-validate="'required|min:6'" data-vv-as="密码" name="register_pwd" type="password"
                     v-show="!register.showPwd"
                     placeholder="请设置密码" v-model.trim="register.pwd">
              <input type="text" placeholder="请设置密码" v-show="register.showPwd" v-model="register.pwd">
              <span v-show="errors.has('register_pwd')">{{ errors.first('register_pwd') }}</span>
              <div class="pwd-eyes" :class="{on: register.showPwd}" @click="register.showPwd = !register.showPwd"></div>
            </div>
            <div class="login-code">
              <div class="login-group" :class="classObject('register_code')">
                <i></i>
                <input v-validate="'required'" data-vv-as="验证码" type="text" name="register_code" placeholder="请输入验证码"
                       v-model="register.code">
                <span v-show="errors.has('register_code')">{{ errors.first('register_code') }}</span>
              </div>
              <button :disabled="time > 0" @click="getCode" class="code-btn">{{text}}</button>
            </div>
            <div class="login-pact">
              <input type="checkbox" id="pact" v-model="register.pact"><label for="pact">已阅读并同意 <a
              href="http://www.xilongfx.com/about/57" target="_blank">《熙隆领航客户协议》</a></label>
            </div>
            <button class="login-btn" @click="registered" :disabled="register.loading"
                    :class="{loading: register.loading}">
              注册并登陆 <i></i></button>
            <p class="login-tip">已有账号，去<span @click="step = 2">登录</span></p>
          </template>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="login-box login-box2">
        <h2 class="login-header">登录</h2>
        <div class="login-group login-phone" :class="classObject('login_phone')">
          <i></i>
          <input v-validate="'required|mobile'" name="login_phone" type="text"
                 data-vv-as="手机号码" placeholder="请输入手机号" v-model.trim="login.phone">
          <span v-show="errors.has('login_phone')">{{ errors.first('login_phone') }}</span>
        </div>
        <div class="login-group login-pwd" :class="classObject('login_pwd')">
          <i></i>
          <input v-validate="'required|min:6'" data-vv-as="密码" name="login_pwd" type="password"
                 v-show="!login.showPwd"
                 placeholder="请设置密码" v-model.trim="login.pwd">
          <input type="text" placeholder="请设置密码" v-show="login.showPwd" v-model="login.pwd">
          <span v-show="errors.has('login_pwd')">{{ errors.first('login_pwd') }}</span>
          <div class="pwd-eyes" :class="{on: login.showPwd}" @click="login.showPwd = !login.showPwd"></div>
        </div>
        <div class="login-tool">
          <p class="login-pact"><input type="checkbox" id="savePhone" v-model="savePhone"><label
            for="savePhone">记住用户名</label></p>
        </div>
        <button class="login-btn" @click="logined" :disabled="login.loading" :class="{loading: login.loading}">
          登录 <i></i></button>
        <p class="login-tip">还没有账号？<span @click="step = 0">免费注册</span></p>
      </div>
    </template>
  </el-dialog>
</template>
<script>
  import { Validator } from 'vee-validate'

  export default {
    data () {
      return {
        visible: false,
        step: 0,
        register: {
          phone: '',
          name: '',
          code: '',
          pwd: '',
          loading: false,
          showPwd: false,
          pact: true
        },
        login: {
          phone: '',
          pwd: '',
          showPwd: false,
          loading: false
        },
        time: 0,
        disabled: false,
        savePhone: false
      }
    },
    created () {
      let phone = localStorage.getItem('phone')
      if (phone) {
        this.savePhone = true
        this.login.phone = phone
      }
    },
    methods: {
      classObject (name) {
        return {
          'is-success': this.fields[name] ? this.fields[name].valid : false,
          'is-danger': this.errors.has(name)
        }
      },
      show (step = 2) {
        this.step = step
        this.$nextTick(() => {
          this.visible = true
        })
      },
      logined () {
        let login = this.login
        let {phone, pwd} = login
        this.$validator.validateAll()
          .then(flag => {
            if (!flag) return
            login.loading = true
            this.$http.post('/index/api/login', {
              username: phone,
              password: pwd
            }).then(data => {
              localStorage.setItem('phone', this.savePhone ? phone : '')
              window.location.reload()
            }).catch(err => {
              // this.$message.error(err)
              login.loading = false
            })
          })
      },
      registered () {
        let register = this.register
        let {phone, name, pwd, code, pact} = register
        if (!pact) {
          this.$message.error('请同意用户协议后注册!')
          return
        }
        this.$validator.validateAll()
          .then(flag => {
            if (!flag) return
            register.loading = true
            this.$http.post('/index/api/register', {
              username: phone,
              password: pwd,
              nickname: name,
              token: code
            }).then(data => {
              localStorage.setItem('phone', phone)
              window.location.reload()
            }).catch(err => {
              // this.$message.error(err)
              register.loading = false
            })
          })
      },
      nextStep () {
        let register = this.register
        this.$validator.validateAll()
          .then(flag => {
            if (!flag) return
            register.loading = true
            this.getCode(true).catch(err => {
              this.asyncError('register_phone', err)
              register.loading = false
            })
          })
      },
      asyncError (key, msg){
        this.errors.errors.unshift({field: key, msg: msg, scope: "__global__"})
        this.fields[key].valid = false
      },
      getCode (isNextStep) {
        return this.$http.post('/index/api/getsms', {
          username: this.register.phone
        }, {notMsg: true}).then(data => {
          if (isNextStep) {
            this.register.loading = false
            this.step = 1
          }
          this.time = 120
          this.$nextTick(() => {
            this.timer()
          })
        })
      },
      timer: function () {
        if (this.time > 0) {
          this.time--
          setTimeout(this.timer, 1000)
        }
      }
    },
    computed: {
      text: function () {
        return this.time > 0 ? this.time + 's 后重新获取' : '获取验证码';
      }
    }
  }
</script>
<style lang="scss">
  $login-color: #1f2531;
  $login-danger-color: #ec0808;
  .loginLayer {
    width: 500px;
    border-radius: 16px;
    background: linear-gradient(#fff, #e7effe);
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__headerbtn {
      top: 10px;
      right: 15px;
      position: absolute;
      z-index: 2;
    }
    .el-dialog__body {
      padding: 0;
    }
  }

  .login-box {
    position: relative;
    padding: 30px 80px 56px;
    &:after {
      content: '';
      position: absolute;
      background: url("top1.png") center no-repeat;
      width: 160px;
      height: 176px;
      top: -66px;
      left: 250px - 161 / 2;
    }
  }

  .login-box2 {
    &:after{
      background-image: url("./top2.png");
    }
  }

  .login-header {
    font-size: 26px;
    text-align: center;
    color: $login-color;
    line-height: 1;
    padding: 80px 0 10px;
    font-weight: bold;
  }

  .login-from {
  }

  .login-group {
    background: 12px center no-repeat;
    line-height: 38px;
    height: 39px;
    border-bottom: 1px solid #ddd;
    margin-top: 16px;
    position: relative;
    input {
      width: 100%;
      // padding: 0 100px 0 42px;
      padding-left: 42px;
      border: none;
      height: 38px;
      background: transparent;
      display: block;
    }
    i {
      position: absolute;
      left: 0;
      top: 0;
      width: 25px;
      height: 38px;
      background-repeat: no-repeat;
      background-position: center;
    }
    span {
      position: absolute;
      height: 38px;
      right: 0;
      top: 0;
      font-size: 12px;
      color: $login-danger-color;
    }
  }

  .is-danger {
    border-color: $login-danger-color;
  }

  .is-success {
    border-color: #06af0a;
    background: url("./success.png") right 10px center no-repeat;
  }

  .login-btn {
    height: 53px;
    margin-top: 35px;
    width: 100%;
    display: block;
    border: none;
    font-size: 16px;
    color: #d0b88a;
    background-color: #1f2531;
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(#6f82a8, .56);
    position: relative;
    &[disabled] {

    }
    &.loading {
      font-size: 0;
      cursor: wait;
      i {
        background: url("./loading.png") center no-repeat;
        width: 34px;
        height: 34px;
        display: block;
        animation: rotating 1.5s linear infinite;
        position: absolute;
        left: 50%;
        top: 10px;
        margin-left: -17px;
      }
    }
  }

  .login-phone i {
    background-image: url("./phone.png");
  }

  .login-name i {
    background-image: url("./name.png");
  }

  .login-pwd {
    background-position: right 36px center;
    i {
      background-image: url("./pwd.png");
    }
    span {
      right: 36px;
    }
  }

  .login-code {
    height: 55px;
    .login-group {
      float: left;
      width: 220px;
    }
    i {
      background-image: url("./code.png");
    }
    button {
      float: right;
      width: 108px;
      height: 35px;
      background: transparent;
      color: #1f2531;
      border: 1px solid;
      border-radius: 5px;
      margin-top: 16px;
      &[disabled] {
        background-color: #c7c7c7;
        color: #ffffff;
        border-color: #c7c7c7;
        cursor: no-drop;
      }
    }
  }

  .login-tip {
    font-size: 12px;
    text-align: right;
    color: #c8c8c8;
    line-height: 1;
    margin-top: 20px;
    span {
      color: #d0b88a;
      cursor: pointer;
    }
  }

  .pwd-eyes {
    width: 32px;
    height: 38px;
    position: absolute;
    top: 0;
    right: 0;
    background: url("./_eyes-open_icon.png") center no-repeat;
    cursor: pointer;
    &.on {
      background-image: url("./_eyes-closed_icon.png");
    }
  }

  .login-pact {
    margin-top: 20px;
    font-size: 12px;
    color: #999999;
    line-height: 1;
    input {
      display: inline-block;
      margin-right: 6px;
    }
    span {
      cursor: pointer;
      color: #d0b88a;
    }
  }
</style>
